<template>
  <div class="detail_collapse">
    <template
      v-if="
        homeState.matchDetail.data[homeState.matchDetail.activetab[0]] &&
        homeState.matchDetail.data[homeState.matchDetail.activetab[0]][homeState.matchDetail.activetab[1]]
      "
    >
      <el-collapse v-model="homeState.matchDetail.activeNames" @change="handleChange">
        <CollapseItem v-for="(value, key) in handicapData" :key="key" :data="value" :mapkey="key" />
        <!-- :bolindex="index + 1 == homeState.matchDetail.datas[homeState.matchDetail.activetab].length" -->
      </el-collapse>
    </template>
    <template v-else>
      <el-empty :image-size="120" :description="languageJson.message.nodata" />
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import CollapseItem from './CollapseItem.vue'
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const { homeStore, homeState } = inject('HomeStore')

const handicapData = computed(() => {
  let a = {}

  if (
    homeState.matchDetail.data[homeState.matchDetail.activetab[0]] &&
    homeState.matchDetail.data[homeState.matchDetail.activetab[0]][homeState.matchDetail.activetab[1]]
  ) {
    let b = homeState.matchDetail.data[homeState.matchDetail.activetab[0]][homeState.matchDetail.activetab[1]]

    let fieldToMove = 'M'

    let entries = Object.entries(b)
    let firstEntry = entries.find(([key]) => key === fieldToMove)
    if (firstEntry != undefined) {
      let filteredEntries = entries.filter(([key]) => key !== fieldToMove)

      let newObj = Object.fromEntries([firstEntry, ...filteredEntries])
      a = newObj
    } else {
      a = Object.fromEntries(entries)
    }
  }
  return a
})
</script>

<style lang="scss" scoped>
</style>

<style>
.detail_collapse .el-collapse {
  border: none;
}
</style>